<template>
    <pageLayout>
        <template v-slot:header>
            <el-input placeholder="输入供应商名字查询" size="smll" class="serach" v-model="query.name"></el-input>
            <!-- 分类框 -->
            <el-select class="m-2" placeholder="全选" style="text-align: right;" v-model="overall">
                <el-option :value="overall"></el-option>
                <el-option value="新建" />
                <el-option value="合作中" />
                <el-option value="已取消" />
            </el-select>
            <el-button size="small" type="primary" @click="queryEvt">查询</el-button>
            <el-button size="small" type="success" @click="addList">新增</el-button>
        </template>
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="供应商名字" width="180" />
                <el-table-column prop="state" label="状态" width="180">
                    <template v-slot="data">
                        {{ data.row.state | typeFilter(stateType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="采购优先级" />
                <el-table-column prop="director" label="负责人" />
                <el-table-column prop="code" label="信用码" />
                <el-table-column prop="devices_state" label="设备状态" />
                <el-table-column prop="production" label="产地" />
                <el-table-column prop="address" label="操作" width="220px">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="small" @click="detail(row)">详情</el-button>
                        <el-button type="text" size="small" @click="edit(row)">编辑</el-button>
                        <el-button type="text" size="small" v-if="row.state === 'N'">审批</el-button>
                        <el-button type="text" size="small" v-if="row.state === 'Y'">审批</el-button>
                        <el-button type="text" size="small" v-if="row.state === 'C'">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 脚部 -->
        <template v-slot:footer>
            <el-pagination :page-sizes="[20, 50, 100, 150]" small layout="total, sizes, prev, pager, next, jumper"
                :current-page="query.page" @size-change="sizeChange" @current-change="currentChange" :total="total">
            </el-pagination>
        </template>
    </pageLayout>
</template>
<script>
import { purchaseList, getDictListApi } from '../../../apis/purchase'
export default {
    data() {
        return {
            overall: '全部',
            tableData: [],
            query: {
                page: 1,
                size: 20,
                name:''
            },
            total: 0,
            stateType: []
        }
    },
    async mounted() {
        this.getList()
        // 调用字典接口
        let dictRes = await getDictListApi('STATE')
        if (dictRes.code === 200) {
            this.stateType = dictRes.data.rows
        }
    },
    methods: {
        //获取列表
        async getList() {
            let r = await purchaseList(this.query)
            if (r.code === 200) {
                this.tableData = r.data.rows
                this.total = r.data.count
            }
        },
        sizeChange(size) {
            this.query.size = size
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        currentChange(page) {
            this.query.page = page
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        // 根据新的条件进行查询，那么必须从第一页开始查询
        queryEvt() {
            this.query.page = 1
            //调取获取数据列表
            this.getList()
        },
        //获取当前详情
        detail(rows) {
            let detail = JSON.stringify(rows)
            sessionStorage.setItem('Purchase',detail)
            this.$router.push('/supplier/detail')
        },
        //去编辑页面
        edit(rows){
            let edit = JSON.stringify(rows)
            sessionStorage.setItem('PurchaseEdit',edit)
            this.$router.push('/supplier/edit')
        },
        addList(){
            this.$router.push('/supplier/new')
        }
    }
}
</script>
<style lang="less" scoped>
.el-input__inner {
    height: 32px;
    line-height: 32px;
}

.el-button {
    text-align: center;
}
.el-button:focus,
.el-button:hover {
  color: #13c2c2;
  border-color: #b5f5ec;
  background-color: #e6fffb;
}
</style>